<div class="content-header row">
    <div class="content-header-left col-md-8 col-12 mb-2 breadcrumb-new">
        <h3 class="content-header-title mb-0 d-inline-block">File Uploader - Dropzone</h3>
        <div class="row breadcrumbs-top d-inline-block">
            <div class="breadcrumb-wrapper mr-1">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="index.html">Home</a>
                    </li>
                    <li class="breadcrumb-item"><a href="#">Extra Components</a>
                    </li>
                    <li class="breadcrumb-item active">Dropzone
                    </li>
                </ol>
            </div>
        </div>
    </div>
    <div class="content-header-right col-md-4 col-12"> <a class="btn btn-warning btn-min-width float-md-right box-shadow-4 mr-1 mb-1" href="chat-application.html"><i class="ft-mail"></i> Email</a></div>
</div>
<div class="content-body"><!-- Dropzone section start -->
    <section id="dropzone-examples">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title"> <i class="ft-alert-triangle danger"></i> Important!</h4>
                        <a class="heading-elements-toggle"><i class="la la-ellipsis-h font-medium-3"></i></a>
                        <div class="heading-elements">
                            <ul class="list-inline mb-0">
                                <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                                <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                                <li><a data-action="close"><i class="ft-x"></i></a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="card-content collapse show">
                        <div class="card-body pt-0 pb-0">
                            <ul class="danger">
                                <li> Don’t forget to specify an url option if you’re not using a form element, since Dropzone doesn’t know where to post to without an action attribute.</li>
                                <li> Dropzone does not handle your file uploads on the server. You have to implement the code to receive and store the file yourself. See the section <a href="http://www.dropzonejs.com/#server-side-implementation" class="alert-link danger">Server side implementation</a> for more information.</li>
                            </ul>
                        </div>
                    </div>
                </div>

            </div>
        </div>

        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">Single File Upload</h4>
                        <a class="heading-elements-toggle"><i class="la la-ellipsis-h font-medium-3"></i></a>
                        <div class="heading-elements">
                            <ul class="list-inline mb-0">
                                <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                                <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                                <li><a data-action="close"><i class="ft-x"></i></a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="card-content collapse show">
                        <div class="card-body">
                            <p class="card-text">This example uploads a single file using dropzone js library. By default, dropzone is a multiple file uploader and does not have specific option allowing us to switch to single file uploading mode, but this functionality can be achieved by adding more options to the plugin settings, such as <code>maxfilesexceeded</code> callback and <code>maxFiles</code> option set to 1. <code>maxFiles: 1</code> is used to tell dropzone that there should be only one file. When there is more then 1 file the function <code>maxfilesexceeded</code> will be called, with the exceeding file in the first parameter. Now only 1 file can be selected and it will be replaced with another one instead of adding it to the preview.</p>
                            <form action="/file-upload" class="dropzone dropzone-area" id="dpz-single-file">
                                <div class="dz-message">Drop File Here Or Click To Upload</div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">Multiple Files Upload</h4>
                        <a class="heading-elements-toggle"><i class="la la-ellipsis-h font-medium-3"></i></a>
                        <div class="heading-elements">
                            <ul class="list-inline mb-0">
                                <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                                <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                                <li><a data-action="close"><i class="ft-x"></i></a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="card-content collapse show">
                        <div class="card-body">
                            <p class="card-text">This example uploads a multiple files using dropzone js library. By default, dropzone is a multiple file uploader. User can either click on the dropzone area and select multiple files or just drop all selected files in the dropzone area. This example is the most basic setup for dropzone.</p>
                            <form action="#" class="dropzone dropzone-area" id="dpz-multiple-files">
                                <div class="dz-message">Drop Files Here Or Click To Upload</div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">Use Button To Select Files</h4>
                        <a class="heading-elements-toggle"><i class="la la-ellipsis-h font-medium-3"></i></a>
                        <div class="heading-elements">
                            <ul class="list-inline mb-0">
                                <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                                <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                                <li><a data-action="close"><i class="ft-x"></i></a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="card-content collapse show">
                        <div class="card-body">
                            <p class="card-text">This example uploads a multiple files using dropzone js library. Using this method, user gets an option to select the files using a button instead dropping all the files after selected from the folders. You have to define <code>dropzone</code> and <code>previewsContainer</code> elements to show preview thumbnails. Also set <code>clickable</code> to match the button's id for button to work as file selector.</p>
                            <button id="select-files" class="btn btn-danger mb-1"><i class="ft-file"></i> Click me to select files</button>
                            <form action="#" class="dropzone dropzone-area" id="dpz-btn-select-files">
                                <div class="dz-message">Drop Files Here Or Click To Upload</div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">Limit File Size & No. Of Files</h4>
                        <a class="heading-elements-toggle"><i class="la la-ellipsis-h font-medium-3"></i></a>
                        <div class="heading-elements">
                            <ul class="list-inline mb-0">
                                <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                                <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                                <li><a data-action="close"><i class="ft-x"></i></a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="card-content collapse show">
                        <div class="card-body">
                            <p class="card-text">
                                In many case user must be limited to upload certain no. of files. You can always set the <code>maxFiles</code> option to limit no. of upload files. <code>maxfilesexceeded</code> event will be called if uploads exceeds the limit. Also, if you want to limit the file size of uploads then set the <code>maxFilesize</code> option. Define the maximum file size to be uploded in MBs like <code>0.5</code> MB as is in this example. User can also define <code>maxThumbnailFilesize</code> in MB. When the uploaded file exceeds this limit, the thumbnail will not be generated.</p>
                            <form action="#" class="dropzone dropzone-area" id="dpz-file-limits">
                                <div class="dz-message">Drop Files Here Or Click To Upload</div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">Accepted files</h4>
                        <a class="heading-elements-toggle"><i class="la la-ellipsis-h font-medium-3"></i></a>
                        <div class="heading-elements">
                            <ul class="list-inline mb-0">
                                <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                                <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                                <li><a data-action="close"><i class="ft-x"></i></a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="card-content collapse show">
                        <div class="card-body">
                            <p class="card-text">The default implementation of <code>accept</code> checks the file's mime type or extension against this list. This is a comma separated list of mime types or file extensions. Eg.: <code>image/*,application/pdf,.psd</code>. If the Dropzone is <code>clickable</code> this option will be used as <code>accept</code> parameter on the hidden file input as well.</p>
                            <form action="#" class="dropzone dropzone-area" id="dp-accept-files">
                                <div class="dz-message">Drop Files Here Or Click To Upload</div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">Remove Thumbnail</h4>
                        <a class="heading-elements-toggle"><i class="la la-ellipsis-h font-medium-3"></i></a>
                        <div class="heading-elements">
                            <ul class="list-inline mb-0">
                                <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                                <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                                <li><a data-action="close"><i class="ft-x"></i></a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="card-content collapse show">
                        <div class="card-body">
                            <p class="card-text">This example allows user to remove any file out of all uploaded files. This will add a link to every file preview to remove or cancel (if already uploading) the file. The <code>dictCancelUpload</code>, <code>dictCancelUploadConfirmation</code> and <code>dictRemoveFile</code> options are used for the wording.</p>
                            <form action="#" class="dropzone dropzone-area" id="dpz-remove-thumb">
                                <div class="dz-message">Drop Files Here Or Click To Upload</div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">Remove All Thumbnails</h4>
                        <a class="heading-elements-toggle"><i class="la la-ellipsis-h font-medium-3"></i></a>
                        <div class="heading-elements">
                            <ul class="list-inline mb-0">
                                <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                                <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                                <li><a data-action="close"><i class="ft-x"></i></a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="card-content collapse show">
                        <div class="card-body">
                            <p class="card-text">This example allows user to create a button that will remove all files from a dropzone. Hear for the button's click event and then call <code>removeAllFiles</code> method to remove all the files from the dropzone.</p>
                            <button id="clear-dropzone" class="btn btn-danger mb-1"><i class="ft-trash"></i>Clear Dropzone</button>
                            <form action="#" class="dropzone dropzone-area" id="dpz-remove-all-thumb">
                                <div class="dz-message">Drop Files Here Or Click To Upload</div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- // Dropzone section end -->
</div>
<script type="text/javascript">
    lucky.require('dropzonePage',lucky.factory('dropzonePage'));
</script>
      